<template>
  <div class="ne-container">
    <div
      class="consult-item"
      v-for="(item, index) in dataSource"
      :key="index"
      @click="
        $toPage(
          `/pages/consult/consultIm?receiver=${item.phone}&personName=${
            item.personName
          }&avatarUrl=${item.avatarUrl || ''}`
        )
      "
    >
      <img :src="item.avatarUrl || require('@/static/image/head.png')" />
      <div class="item-body">
        <div class="item-top">
          <span class="name">{{ item.personName }}</span>
          <span class="value">{{ item.phone }}</span>
          <!--          <span class="value">主任医师</span>-->
        </div>
        <div class="desc">
          {{ item.tags }}
        </div>
      </div>
      <van-icon name="arrow" class="a-arrow" />
    </div>
    <van-empty v-if="!dataSource.length" description="暂无联系人" />
  </div>
</template>

<script>
import { tbChatMessageContacts } from '../../api/tbChatMessage'
import { mapGetters } from 'vuex'
export default {
  name: 'wx_pages_consult_index',
  data() {
    return {
      dataSource: [],
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
    userInfo: {
      immediate: true,
      deep: true,
      handler(userInfo) {
        if (userInfo && userInfo.userId) {
          this.search()
        }
      },
    },
  },
  methods: {
    async search() {
      this.$showLoading('查询中...')
      let res = await tbChatMessageContacts({
        userId: this.userInfo.userId,
      })
      this.$hideLoading()
      if (res && res.data) {
        this.dataSource = res.data
      }
    },
  },
  onLoad(query) {},
}
</script>
<style lang="scss" scoped>
.consult-item {
  border-bottom: 1px solid #f6f6f6;
  position: relative;
  height: 60px;
  padding: 5px 0;
  box-sizing: border-box;
  .a-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
  }
  img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    float: left;
  }
  .item-body {
    overflow: hidden;
    padding-left: 10px;
    .item-top {
      display: flex;
      align-items: center;
      gap: 10px;
      .name {
        font-weight: bold;
      }
      .value {
        font-size: 14px;
        position: relative;
        &::after {
          content: '';
          position: absolute;
          width: 1px;
          height: 14px;
          background: #333333;
          top: 50%;
          transform: translateY(-50%);
          right: -6px;
        }
        &:last-child {
          &::after {
            display: none;
          }
        }
      }
    }
    .desc {
      color: #0000004d;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
      width: 85%;
      margin-top: 5px;
    }
  }
}
</style>
